<template>
<!--操作栏-->
  <div >
<!--  个人文档类别-->
    <span>个人文档类别-
      <el-select v-model="form.region" placeholder="Select" size="large">
        <el-option label="计划"  />
        <el-option label="资料" />
      </el-select>
    </span>
<!--  文件夹设置-->
    <span style="right: 20px;position:absolute;z-index: 99">
        <el-menu style="width: 200px;float:right;">
          <el-sub-menu>
            <template #title>
              <el-icon><setting /></el-icon>
              <span>文件夹设置</span>
            </template>
            <el-menu-item-group title="Group One">
              <el-menu-item index="1-1">计划
                <el-popconfirm title="你确定要保存修改吗?">
                   <template #reference>
                     <el-button
                        style="float: right"
                        type="primary"
                        text
                        link
                      >编辑</el-button>
                   </template>
                </el-popconfirm>
              </el-menu-item>

              <el-menu-item index="1-2">item one</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>

    </span>
<!--  搜索栏-->
<!--    文档类型、主题关键字-->
    <div style="box-sizing: border-box;padding-top: 20px">
      <span>文档类型
        <el-select v-model="searchfiles.fileType" class="m-2" placeholder="Select" size="large">
        <el-option
            v-for="item in fileTypes"

            :key="item"
            :label="item"
            :value="item"

        />
        </el-select>
        主题关键字
        <el-select v-model="searchfiles.subjectKeywords" class="m-2" placeholder="Select" size="large" filterable >
          <el-option @click="searchfiles.subjectKeywords=''" value=""> </el-option>
          <el-option
            v-for="item in filebackups"
            data="files"
            :key="item.subjectKeywords"
            :label="item.subjectKeywords"
            :value="item.subjectKeywords"
        />
        </el-select>
      </span>
    </div>
<!--    上传时间-->
    <div style="padding-top: 20px">
      <span >上传时间
      <el-date-picker
          v-model="searchfiles.uploadDate"
          type="daterange"
          start-placeholder="Start date"
          range-separator="To"
          end-placeholder="End date"
      /> </span>
      <el-button style="margin-left: 40px" @click="searchfile" >搜索</el-button>
      <el-button >重置</el-button>
      <el-button style="margin-left: 140px">上传文档</el-button>
    </div>

  </div>
<!--文档信息栏-->
  <div style="padding-top: 10px">
    <el-table
        title="文档信息"
        ref="multipleTableRef"
        :data="subAttend"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column property="fileTitle" label="文档标题" width="150" />
      <el-table-column property="subjectKeywords" label="主题关键字" show-overflow-tooltip width="150"/>
      <el-table-column property="fileType" label="文件类型" width="150" />
      <el-table-column property="uploadDate" label="上传时间" width="250"/>
      <el-table-column property="fileId" label="操作" width="200" >
        <template #default="scope">
          <el-button
              type="primary"
              text
              link
          >
            <el-icon><EditPen/></el-icon>
          </el-button>
          <el-button @click="deleteDialogFormVisible=true,file_Id=scope.row.fileId"
                     type="primary"
                     text
                     link
          >
            <el-icon><DocumentDelete /></el-icon>
          </el-button>
          <el-button
              type="primary"
              text
              link
          >
            <el-icon><Position /></el-icon>
          </el-button>
          <el-button
              type="primary"
              text
              link
          >
            <el-icon><Fold /></el-icon>
          </el-button>
        </template>
      </el-table-column>


    </el-table>
<!--    删除对话框-->
    <el-dialog v-model="deleteDialogFormVisible" title="确定要删除该文档吗？">
      <el-button @click="deletefile()">确定</el-button><el-button @click="deleteDialogFormVisible=false">取消</el-button>
    </el-dialog>
  </div>
<!--  分页-->

  <div class="block">
    <p>Component value：{{ value }}</p>
    <el-date-picker
        v-model="value"
        type="daterange"
        start-placeholder="Start date"
        end-placeholder="End date"
        :default-time="defaultTime"
    />
  </div>

  <div style="margin: 10px 0px">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="doPaging"
        v-model:currentPage="currentPage"
        :page-sizes="[1, 2, 5, 10]"
        v-model:page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        v-model:total="total"
    />
  </div>
  <router-link to='/document/uploadfile'><el-button @click="insertFileId">上传文档</el-button></router-link>

</template>


<script>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import  qs from 'qs'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: "MyFile",
  data(){
    return{
      value : ref(''),
      defaultTime : ref([
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ]),
      file_Id:'',
      deleteDialogFormVisible:false,
      files:[],
      filebackups:[],
      subjectKeywords:[],

      subAttend:[],

      form:{
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },

      tableData: [],
      currentPage:1,
      pagesize:10,
      total:10,

      fileTypes:[
          '',
          'excel',
          'word',
          'ppt',
          'zip',
          '其他'
      ],
      searchfiles:{
        fileType:'',
        fileTitle:'标题',
        subjectKeywords:'',
        uploadDate:'',
        uploadDate1:'',
        uploadDate2:''
      }

    }
  },
  methods:{
    // searchfileType(fileT){
    //   if (0){
    //     console.log("成功了1234567890")
    //
    //   }
    // },
    insertFileId(){
      let that=this
      this.$axios.get("http://localhost:8080/file/insertFileId",{
        params:{
          workerId:that.$store.state.user.workerId,
          workerName:that.files[0].workerName
        }
      }).then(function (res) {
        console.log("res="+res+that.files[0].workerName)
        console.log("1数据库添加新的文档")
      })
    },
    doPaging(curr){
      console.log(curr)
      console.log(this.subAttend)
      this.subAttend=this.files.slice((curr-1)*this.pagesize,curr*this.pagesize)
      console.log(this.subAttend)
    },
    searchfile(){
      let that=this
      let str=qs.stringify(that.searchfiles.fileType)
      this.$axios.get("http://localhost:8080/file/searchMyFile",{
        params:{
          workerId:that.$store.state.user.workerId,
          fileType:that.searchfiles.fileType,
          subjectKeywords:that.searchfiles.subjectKeywords
        }
      }).then(function (res) {
        that.files=res.data
        that.doPaging(1)
        that.currentPage=1
        console.log(that.files)
      })

    },
    deletefile(){
      let that=this
      that.deleteDialogFormVisible=false
      let str=qs.stringify(that.searchfiles.fileType)
      this.$axios.get("http://localhost:8080/file/deleteFile",{
        params:{
          fileId:that.file_Id,
          workerId:that.$store.state.user.workerId
          // fileId:that.defaultTime[0],
          // workerId:that.defaultTime[1]
        }
      }).then(function (res) {
        that.files=res.data
        console.log(that.files)
      })
    },
    // upload () {
    //   this.$router.push({name:'publicfile',params: {id:'123456'}})
    // },
    handleEdit(){

    },
    handleSizeChange(){
      this.doPaging(1)
      this.currentPage=1
    },
    handleCurrentChange(){

    }
  },
  created() {
    let that=this
    this.$axios.get("http://localhost:8080/file/listOne",{
      params:{
        workerId:that.$store.state.user.workerId
      }
    }).then(function (res) {
      that.files=res.data
      that.subAttend=res.data
      //that.files[0].fileType="wendang"
      that.filebackups=res.data
      console.log(that.files)
      console.log(that.files[2].fileId+"你好")
      this.subAttend=this.files.slice((0)*this.pagesize,curr*this.pagesize)
    })
    //that.files[0].fileType="wendang"
  }

}

</script>


<style scoped>
.el-descriptions-item{
  height: 300px;
  weight:200px;
}
</style>